<!--底部删除已完成，当页面切换到Done的时候应该有删除已完成的图标  -->
<template>
  <div class="bottom" v-if="del">
    <button @click="handelDel">Done Clear</button>
  </div>
</template>

<script setup>
import { ref, reactive, watchEffect } from "vue";
import { useTodoStore } from "../store/useTodoStore.js";
import { storeToRefs } from 'pinia'
const TodoStore = useTodoStore();

//将pinia中的数据改变为响应式数据
const {del,todos} = storeToRefs(TodoStore)

function handelDel() {
    for (let i = 0; i<todos.value.length; i++) { 
        // console.log(todos.value[i].value);
      if (todos.value[i].isDone == true) {
        todos.value.splice(i, 1)
      }
  }
  //这点有bug就是当有多条数据需要删除，由于是数组，所以索引一直在变，会删不干净，我干脆删了两次

  for (let i = 0; i<todos.value.length; i++) { 
        // console.log(todos.value[i].value);
      if (todos.value[i].isDone == true) {
        todos.value.splice(i, 1)
      }
    }
}


</script>

<style scoped>
.bottom {
  position: absolute;
  bottom: 10px;
  left: 50px;
}
</style>
